<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网络视频聊天</title>
</head>
<style>
    body {
        background: #3D6DF2;
        margin-top: 15px;
        font-family: sans-serif;
        color: white;
    }
    video{
        background: black;
        border: 1px solid gray;
    }
    .page{
        position: relative;
        display: block;
        margin: 0 auto;
        width: 500px;
        height: 500px;

    }
/*    #container{
        position: relative;
        display: block;
        margin: 0 auto;
        width: 500px;
        height: 50px;
    }*/
    #yours{
        width: 150px;
        height: 150px;
        position: absolute;
        top: 15px;
        right: 15px;
    }
    #theirs{
        width: 500px;
        height: 500px;
    }

</style>
<body>
    <div id="login-page" class="page">
    <h2> Loigin As </h2>
        <input type="text" id="username"/>
        <button id="login">Login</button>
    </div>

    <div id="call-page" class="page">
        <video id="yours" autoplay></video>
        <video id="theirs" autoplay></video>
        <input id="their-username" type="text"/>
        <button id="call">Call</button>
        <button id="hang-up">Hang Up</button>
    </div>
<script src="../static/js/network-chat-room-booth.js"> </script>
</body>
</html>